<template>
  <div>
    <el-form ref="form" :model="searchModel" label-width="80px">
      <el-form-item label="输入搜索">
        <el-input v-model="searchModel.name"></el-input>
      </el-form-item>
      <el-form-item label="商品货号">
        <el-input v-model="searchModel.productNum"></el-input>
      </el-form-item>
      <el-form-item label="label">
        <el-select v-model="searchModel.categoryId" placeholder="placeholder">
          <el-option v-for="(item, index) in categoryList" :key="index" :label="item.pcName" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-button type="primary" size="default" @click="handleSearch">搜索</el-button>

    </el-form>
  </div>
</template>
<script>
  export default {

    name: 'ProductAdd',
    data() {
      return {
        productList: [], //所有的商品集合
        showProductList: [], //显示的商品集合
        brand: [],
        categoryList: [], //分类列表
        searchModel: {
          name: '',
          productNum: '',
          categoryId: '',
          branid: '',
          isSale: '',
          isRecoment: ''
        }

      }
    },
    created() {
      //商品信息
      this.axios.get('http://localhost:3030/product?_page=1&_limit=3')
        .then(res => {
          this.productList = res.data;
          this.getBrand();


        })
      this.axios.get('http://localhost:3030/productCategory')
        .then(res => {
          this.categoryList = res.data;
        })
    },
    mounted() {
      //分页查询   当前第几页 _page  每页条数 _limit
      //排序：按照id降序  _sort=排序的字段  _order=asc（升序）|desc(降序)  先排序再取数据
      // this.axios.get('http://localhost:3030/product?_page=1&_limit=3&_sort=id&_order=desc')
      //   .then(res => {
      //     console.log(res)
      //   })

      //从第n条取到第m条数据 取第1条到第3条  _start=开始位置    _end=结束位置  从0开始算  包头不包尾
      // this.axios.get('http://localhost:3030/product?_start=1&_end=3')
      //   .then(res => {
      //     console.log(res)
      //   })
      //取一个数据区间的数据：库存>0并且小于300的数据  _gte 表示大于等于 _lte 表示小于等于
      // this.axios.get('http://localhost:3030/product?count_gte=0&count_lte=200')
      //   .then(res => {
      //     console.log(res)
      //   })
      //模糊查询  查询华为手机  
      // this.axios.get('http://localhost:3030/product?name_like=华为')
      //   .then(res => {
      //     console.log(res)
      //   })

    },
    methods: {
      handleSearch() {
        /* 
        筛选数据
          已进入页面分页查询1-3条
          点击查询
            发送请求查询数据
              携带参数：name_like=商品名称输入框的值&货号=输入的货号....
              定义字符串数组：['key_like=value[key]','key=value[key]']

              遍历表单模型对象的属性（key）
                判断属性对应的值是否是空
                  拼接url 'key_like=value[key]'  'key=value[key]'

                  join('&')

          查询到的数据渲染到页面  
      
      
       */
        var arr = [];
        for (const key in this.searchModel) { //key=name  searchModel[key]=admin
          if (this.searchModel[key] != '') {
            let str = key + (key == 'name' ? '_like' : '') + '=' + this.searchModel[key]; //name_like=admin
            arr.push(str);
          }
        }
        let param = arr.join('&');
        //发送请求
        this.axios.get('http://localhost:3030/product' + (arr.length > 0 ? ('?' + param) : ''))
          .then(res => {
            this.productList = res.data;
            this.getBrand();
          })
      },
      getBrand() {
        //添加品牌名称
        //如果this.brand没有数据时发送请求查询
        if (this.brand.length == 0) {
          this.axios.get('http://localhost:3030/brand')
            .then(res => {
              this.brand = res.data;
              this.addBrandInfo();
            })
        } else {
          this.addBrandInfo();

        }


      },
      addBrandInfo() {
        //循环商品列表
        outer: for (let i = 0; i < this.productList.length; i++) {
          let brandId = this.productList[i].branid;
          //循环品牌列表
          for (let j = 0; j < this.brand.length; j++) {
            let id = this.brand[j].id;
            if (brandId == id) {
              //给当前遍历到的商品添加品牌名称
              this.productList[i].brandName = this.brand[j].brandName;
              continue outer;
            }
          }
        }
        console.log(this.productList);

      }

    },

  }

</script>
<style lang='less' scoped>
</style>
